<template>
	<div class="container">
		<ul class="img_list">
			<router-link v-for="item in list" :key="item.id" :to="'/home/goodsinfo/'+item.id" tag="li">
				<img :src="item.url"/>
				<p class="title1">{{item.title}}</p>
				<p class="title">
					<span class="new">￥{{item.sell_price}}</span>
					<span class="old">￥{{item.m_price}}</span>
					</p>
					<p>
						<span>热卖中</span>
						<span>剩余{{item.stock}}件</span>
					</p>
			</router-link>
			<mt-button type="danger" size="large" plain @click="getMore" >加载更多</mt-button>
			<div class="clear"></div>
		</ul>
	</div>
</template>

<script>
	export default({
		data(){
			//data网自己组件内部 挂载数据
			return{
				list:[],
				pageindex:1
			}
		},
		created(){
			this.getgoods()
		},
		methods:{
			getgoods(){
				this.$http.get('http://localhost:3002/goodslist').then(result=>{
					if(result.body.status==0){
						let arr=[]
						let res = []
						//定义res用来接收循环message
						arr = result.body.message
						res  = this.list
						for (let index in arr) {
							if(arr[index].pageindex == this.pageindex){
								this.list.push(arr[index])
							}
						}
						res.concat(this.list)
						this.list = res
					}
				})
			},
			getMore(){
				this.pageindex++;
				this.getgoods();
			}
		}
})
</script>

<style scoped>
	.clear{
		clear: both;
	}
	.img_list{
		width: 340px;
		margin: 6px auto 50px auto;
		padding: 0;
	}
	p{
		margin-bottom: 0;
	}
	.img_list li{
		width: 47%;
		float: left;
		list-style: none;
		margin: 4px;
		border: 1px solid #CCCCCC;
		background: #CCCCCC;
		box-shadow: 0 0 4px #CCCCCC;
		color: #000000;
	}
	.img_list li img{
		width: 100%;
		height: 140px;
		
	}
	.title{
		color: #000000;
	}
	.title .old{
		text-decoration: line-through;
	}
	.title .new{
		color: red;
		font-weight: 200px;;
	}
</style>
